<template>
  <div>
    <div
      :class="['ge', flag ? 'click' : '', isRight ? 'red' : '']"
      @click="handleClick()"
      @contextmenu.prevent="rightClick">
      {{ val }}
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    x: Number,
    y: Number,
    isEnd: Boolean,
  },
  data() {
    return {
      value: 0,
      isMine: false,
      flag: false,
      val: "",
      isDfs: false,
      isRight: false,
    };
  },
  methods: {
    ...mapMutations("audio", ["beginClickBg"]),
    reset() {
      this.value = 0;
      this.val = "";
      this.flag = false;
      this.isRight = false;
      this.isDfs = false;
      this.isMine = false;
      this.init();
    },
    init() {
      if (Math.random() * 100 < this.level) {
        this.isMine = true;
        this.$emit("addMine");
      }
    },
    handleClick() {
      this.beginClickBg();
      if (this.isEnd) return this.$message.error("游戏已经结束了");
      if (this.flag) return;
      if (this.isRight) return;
      this.flag = true;
      if (this.isMine) {
        this.val = "*";
        return this.$emit("handleEnd");
      } else if (this.value != 0) this.val = this.value;
      else if (this.value == 0) this.$emit("handleDfs", this.x, this.y);
      this.$emit("addComplete");
      this.$emit("judgeEnd");
    },
    rightClick() {
      if (this.flag) return;
      if (this.isEnd) return this.$message.error("游戏已经结束了");
      if (this.isRight) {
        this.isRight = false;
        this.val = "";
      } else {
        this.isRight = true;
        this.val = "!";
      }
    },
  },
  computed: {
    ...mapState("setting", ["level"]),
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.ge {
  width: 20px;
  height: 20px;
  border: 1px solid #818181;
  background-color: #c0c0c0;
  box-shadow: 1px 1px 1px #fff inset, -1px -1px 1px #808080 inset;
  text-align: center;
  line-height: 18px;
  font-size: 16px;
  box-sizing: border-box;
  color: blue;
  cursor: default;
}
.click {
  background-color: #eee;
  box-shadow: none;
}
.red {
  color: red;
}
</style>
